<template>
  <view class="data-item pa-12 br-16 mb-12 relative overflow-hidden" @click="toDetails">
    <view class="absolute right-0 top-0">
      <TImage
        v-if="data?.boType === BoTypeEnum.Supply"
        src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/supply-icon-1.png"
        width="80rpx"
        height="80rpx"
      />
      <TImage
        v-else
        src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/demand-icon-1.png"
        width="80rpx"
        height="80rpx"
      />
    </view>
    <view class="fz-16 default-color font-bold ov-2 mb-9">
      <text>{{ data?.title }}</text>
    </view>
    <view class="disFlxJS mb-9">
      <text v-if="data?.industryCategoryNames" class="flex-1 ov-1 fz-12">
        <text >{{ data.boType === BoTypeEnum.Demand ? '行业要求：' : '所属行业：' }}</text>
        <text>
          {{ data?.industryCategoryNames }}
        </text>
      </text>
      <text class="type-tag ml-16 fz-10 px-6 py-2">{{ data?.cooperationTypeName }}</text>
    </view>
    <view class="disFlxJS fz-12" style="color: #969799">
      <text class="flex-1">更新于：{{ formatToDate(data?.updateTime) }}</text>
      <view class="ml-12 disFlxAC">
        <text class="ali-icon mr-4 fz-16">&#xe6cd;</text>
        <text>{{ data?.cooperationNum }}</text>
      </view>
      <view class="ml-12 disFlxAC">
        <text class="ali-icon mr-4 fz-18">&#xe8bf;</text>
        <text>{{ data?.browseNum }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { navigateTo } from '@/router';
  import TImage from '@/components/TImage/index.vue';
  import type { PropType } from 'vue';
  import type { ISupplyDemandSquareResult } from '@/api/businessOpportunities/type';
  import { BoTypeEnum } from '@/enums/businessOpportunitiesEnum';
  import { formatToDate } from '@/utils/dateUtil';

  const props = defineProps({
    data: Object as PropType<ISupplyDemandSquareResult>,
  });

  function toDetails() {
    if (props.data) {
      navigateTo({
        name: 'supplyDemandDetails',
        options: {
          id: props.data.id,
        },
      });
    }
  }
</script>

<style lang="scss" scoped>
  .data-item {
    background-color: #fff;
    .type-tag {
      color: #2878ff;
      background-color: #d0f7ff;
    }
  }
</style>
